* {

    box-sizing: border-box;

 





}



/*

Grid and flex css

*/

.stickyHeader{

    background-color:rgba(88, 142, 197,0.4);

    position:sticky;

    width:100%;

    top:0px;

}


.buttonToBooking{
    text-decoration: none;;
}



.sub-waveform{
    width:100%;
translate: 0px 10%;
    transition:top 0.2s linear 0s;
}
.wave{
    position:relative;
    z-index: 2;
    }

    .rotated-wave{
        overflow-x:hidden;
        transform:rotate(180deg);
/*        transition:top 0.4s linear 0s;*/
        translate:0px 70%;
        }

.grid {

    display: grid;

    grid-template-columns: repeat(8, minmax(15px, 1fr));

    grid-template-rows:repeat(6,1fr);

    grid-gap: 1em;

    justify-content: stretch;

    justify-items: center;

    align-items: stretch;

   

}



.grid-contain {

    

}





.top{

    grid-area:1/1/span 2/-1;

}

.flex-container {

    display: flex;

    flex-wrap: wrap;

    flex: column;





}



.flex-item {}



body {

    width: 100%;

    height:auto;

    margin: 0;

    display:flex;

    flex-direction:column;

    flex-wrap:nowrap;

    justify-content: center;

    /*grid-template-columns:1fr repeat(3,2fr) 1fr;

    grid-template-rows:repeat(20,30vh);

    grid-gap:0.5em;

*/
}









section {

   

    border-radius: 2em;

   

   /* background-color: #f5f5dc99;*/

}







article {

    width: 50%;

}

main {

    /*width: 80%;*/    

    margin: 0;



    /*grid-area:6/1/span 13/-1;*/

    overflow:hidden;

    background-color: whitesmoke;

    z-index:1;

}

.margin{

   

}

.CallToActionCont{

    height:clamp(400px,55vw,1500px);

    row-gap:3rem;

}

.CallToAction{

    display:flex;

    flex-direction: column;

    flex-wrap: wrap;

    height:auto;

    align-content: center;

    justify-content:space-around;

    padding:1em;



    

}



.CallToAction > h2{

    display:flex;

    font-size:clamp(30px,4.8vw, 120px);

   

    letter-spacing:0.05em ;

    color:whitesmoke;

   

    

}

.CallToActionCont > span{

    width:100%;

    align-self:flex-start;

    margin-left:2rem;

    

    

}



.linkButt{

    font-size:calc(2vw + 1vh);



    text-decoration: none;

    

    padding:0.2em 1em 0.2em 1em;

    text-align: center;

    

    color:Black;

    background-color:whitesmoke;

    border-radius:0.7em;

    transition: all 500ms linear;

}



.linkButt:link{

   

   

    text-decoration: none;

    

    padding:0.2em 1em 0.2em 1em;

    text-align: center;

    

    color:Black;

    background-color:whitesmoke;

    border-radius:0.7em;

    transition: all 500ms linear;

}

.linkButt:hover{

  background-color:rgba(97, 155, 240, 1);

    

}

.linkButt:active{

    color:inherit;

    

}

.linkButt:visited{

    color:inherit;

}



.mainBook{

    background-image:src();

}



header {

    background-image:url("..\\assets\\CabbinPhotos\\shed%20BrynsPhotos\\HeaderFrontImage.jpg");

    background-size:cover;

    background-repeat:no-repeat;

    background-position-y:  10%;

    overflow:visible;

    background-color: #7A917900;

    min-height:41rem;

    z-index:1;

}



header > h1 {

    margin: 0 auto;

    width: inherit;

}

nav {



    margin: 0 auto;

    

    width: 100%;

    

}



ul {

    list-style-type: none;

    display: inline-flex;

    padding: 0px;

}







.foot-cont{

    /*display:grid;

    grid-template-rows:20% 20% 20% 20% 20%;

    grid-template-columns:1fr 1fr 1fr 2fr ;*/

   

    overflow:hidden;

    /*max-height: 10vw ;*/

    /*display: grid;*/

    padding:1em;

    margin:0 auto;

    display:flex;

    flex-direction:row;

    justify-content: space-evenly;

    flex-wrap:wrap;

    background-color:#133751;

    z-index:1;

   

}



footer {

    overflow:hidden;

    width:100vw;

    height:fit-content;

}

.footerBackgroundMask{

    width:100vw;

    height:15vw;

   background-image:url("../assets/Media/background-image/Footer-background.png");

   background-repeat: no-repeat;

   background-size:cover;

   background-color: whitesmoke;



}



.foot-cont a[href="#Home"] > div {

    

}

.foot-cont a[name="BookNow"]{

   justify-self: center;

    align-self: center;

    

}

.foot{

    display:flex;

    flex-direction:row;

    flex-wrap:nowrap;

    align-items: flex-start;

    text-decoration: none;

    overflow:hidden;

    flex-basis: 15%;

     

}

.foot .navLogoText h2{

    color:whitesmoke;

    font-size:clamp(12px, 1.2vw, 2em);

}

.foot .navLogoText{

    flex-basis:30%;

  

}

.navlogoFoot{ 

    translate:10% 0%; 

     scale:calc(1.4);

     margin:0 auto;

     overflow:hidden;

     flex-basis:60%;

     

     

 }



 .foot-nav{

    display:flex;

    align-items: stretch;

    justify-content:space-evenly;

  



    height:calc(14vw + 13vh);

    flex-direction: column;

    width:calc(4vw + 4vh);

    flex-wrap:nowrap;

    flex-basis:20%;

}

.foot-nav-cont{

    display:flex;

    justify-content: space-around;

    flex-direction: column;

    flex-wrap:nowrap;

    align-items: center;

    height:calc(10vw + 11vh);

}

.foot-nav h2{

    width:100%;

    

    margin:0;

}



.foot-nav > *{

    color:whitesmoke;

}

.foot-nav-item{

    overflow:hidden;

}

.foot-nav-item > a{

    text-decoration:none;

    color:inherit;

    height:inherit;

    width:inherit;

    font-size:calc(1vw + 0.4vh)

}



.footButt{

    align-self: flex-start;

    justify-self: center ;

    height:2.5em;

    width:9em !important;

    border-radius:1.5em !important;

    text-align: center;

    line-height:1.5em ;

    font-size:calc(1vw + 1.2vh);

    flex-basis:20%;

}





.background-shape{

    position:absolute;

    translate:0em 0em ;

    background-color: #1b1d1e;

    width:40%;

    height:100%;

    opacity:0.8;

    clip-path: ellipse(50% 55%);

    z-index:0;



}

.mask-background{}



#navlogo{

    

    max-width: 12vw;

    min-width:8vw;

    margin:0 auto;

    position:relative;

    top:-1vw;

    left:3vw;

    

}



.nav-container {

    max-height: 20vw;

    min-height: 15vw;

    max-width: 100%;

    display: flex;

    flex-direction: row;

    justify-content: space-between;

    background-color:rgba(99, 99, 208, 0);

    margin: 0;

}



.nav-item {

    flex-grow: 1.5;

    flex-shrink:1;

    color:whitesmoke;

   

    border-radius: 0;

    display: flex;

    max-width:100%;

    align-items: center;

    justify-content: space-around;

   

    padding:0px;

    transition:all 500ms ease-in;



}





/**.nav-item + .nav-item::before {

    content: '|';

    line-height: :0.5rem;

    font-family: "NotoSerif";

    font-weight: lighter;

    padding-bottom: 0.1rem;

    font-size: 4.5vw;

   





}

**/





.navLink{

  



}



.nav-item a {

    text-decoration: none;

    font-size:1.7vw;

    color: whitesmoke ;

    margin: 0 auto;

    display:flex;

    

}

.nav-item a h2{



  font-weight:400;

  font-style: normal;

  font-size:1.5vw;

  margin:0;

  text-align: left;

  

}

.navLogoText{

    display:flex;

    flex-direction:column;

    flex-wrap:nowrap;

    justify-content: flex-start;

    align-content: flex-start;    

      

    max-width: 12vw;

    min-width:8vw;

    margin:0 auto;

}

.navLogoText h2{

  

      font-weight:400;

  font-style: normal;

  font-size:1.5vw;

  margin:0;

  text-align: left;

}



#MainHero {



    display: grid;

    grid-template-columns: repeat(5, 1fr);

    grid-template-rows: repeat(5, 1fr);

    max-width: 100vw;

    margin:0px;



}



#MainHero > img {

    

    overflow-x: hidden;

    grid-area: 1/1/-1/-1;

    overflow:hidden;

    max-width:100%;

    min-width: 50%;

  



    z-index: -1;

}



#MainHero > figcaption {

  

    font-size: 1.8vw;

    background-color: white;

    grid-area: 4/1/span 4/-1;

    align-self: center;

}



#MainHero > figcaption > h1{

    padding-bottom: 0.5rem;

    padding-top:0.5rem;

    font-size:3rem;

    

    margin:auto 0;

    display:block;

}

.home{

    height:auto;

    margin:4rem;

    translate:0px 4rem;

    z-index: 3;

    padding:0;

}



.home h2{

    font-size: 2em;

    margin-bottom:1.5em;

    padding-top:1em;

    width:90vw;

    border-bottom:solid 1px black;

    

}





/*not 100% surewhat the link one does*/





a[name="Button"] {

  

    padding:0.5em;

    text-decoration: none;

    

    color:Black !important;

    background-color:whitesmoke;

    border-radius:0.7em;

    transition: all 500ms linear;

}



a[name="Button"]:hover{

     background-color:rgba(97, 155, 240, 1);

    opacity: 0.5;

}

#bookingA,#contactA{

    text-align: center;

    

}

.nav-item:hover #bookingA{

     background-color:rgba(97, 155, 240, 1);

}

.navitem:hover #contactA{

     background-color:rgba(97, 155, 240, 1);

}



.nav-item a:active {

    color:inherit

}



.nav-item a:visited {

    color:inherit;

}







.background {

    /*

  background-image: url();

  background-repeat:no-repeat;

  background-position:top;

  background-size:100vw, 100vh;

*/

    height: 100vw;

    width: 80vw;

    position: fixed;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);



    z-index: -1;



}



.cont-2nd {

    display: block;

    width: 50vw;

    margin: 0 auto;

}



.cont-3rd {

    display: block;

    width: 33vw;

    margin: 0 auto;

}



.cont-5th {

    display: block;

    width: 20vw;

    margin: 0 auto;

}



/*colors - pale Goldenrod - #EAD8AC, IndianRed - #C46C4C, DarkSlateGrey - #1E3226, Rosy Brown - #A19F81, DarkGreenSea -#7A9179 */

.PaleGold {

    background-color: #EAD8AC;

}



.Slate {

    background-color: #1E3226;

}



.RosyBrown {

    background-color: #A19F81;

}



.GreenSea {

    background-color: #7A9179;

}



.IndianRed {

    background-color: #C46C4C;

}



.OffWhite {

    background-color: #FAF9F6;

}



.Beige {

    background-color: #f5f5dc85;

}

.SkyBlue{

    background-color:#79aedf;

}



.colorBlock {

    height: 2em;

    width: 2em;

}



#Home {}



#HomeTitle {

    position: relative;

    top: -1.1em;

}



#TheShed {



      grid-area:2/1/span 1/-1;

   

    border-radius: 0.5em;

}



#Contact{

    justify-self:end;

  

    width:30vw;

    max-height: 100%;

    /*height:10vw;*/

    border:none;



    grid-area:2 / 4 / -1 / 5;

    overflow: hidden;

    display:flex;

    flex-wrap: wrap;

    justify-content: space-evenly;

   

    flex-direction:column;

    

    

}

#Contact div{

    display:flex;

    flex-direction: row;

    width:100%;

    align-items:center;

    justify-content:left;

}

#Contact div h2{

    margin-left:2em;

    color:whitesmoke;

    font-family: "NotoSerif";

    text-align: justify;

}



#Contact div img{

    width:calc(3vw + 1vh);

    

}

#Contact h3 {

    font-size:calc(1.5vw + 1vh);

      color: white;

      justify-self: flex-start;

      align-self: flex-start;

      text-align: left;



}


#Contact p {

    font-size:0.5em;

      color: white;

}



/*

crateing underlines for active links

*/

.active::after{

    content:'';

    display:block;

    width:0%;

    border-bottom: 2px solid whitesmoke;

    transition: all 500ms linear;

}



.active:hover::after,.active:focus::after,.active:active::after{

   /* position:absolute;*/

    content:'';

    display:block;

    width:100%;

    border-bottom: 2px solid whitesmoke;

    

}

.activeNav::after{

    opacity: 0;

    position:absolute;

    translate:-0% 2em;

    content:'';

    display:block;

    visibility: hidden;

    border-bottom: 2px solid whitesmoke;

    

    transition: all 500ms linear;

}



.nav-item:hover .activeNav::after,.activeNav:focus::after,.activeNav:active::after{

    opacity:0.8;

    visibility: visible;

  /*  position:absolute;

    top:20vh;*/

    content:'';

    display:block;

    border-bottom: 2px solid whitesmoke;

    

}

/*

.setActive::after{

    opacity: 0;

    position:absolute;

    top:19vh;

    content:'';

    display:block;

    width:8vw;

    visibility: hidden;

    border-bottom: 2px solid whitesmoke;

    transition: all 500ms linear;

}

*/

.setActive::after{

    opacity:0.8 !important;

    visibility: visible;

    /*position:absolute;

    top:19vh;*/

    content:'';

    display:block;

    border-bottom-color:rgb(196, 184, 207) !important;

    border-bottom: 2px solid whitesmoke;

    

}

.homeA::after{

    width:5.5vw !important;



}

.areaA::after{

    width:4vw !important;

}

.cabinA::after{

    width:9vw !important;

}

.galleryA::after{

    width:6.5vw !important;

}